<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .box {width:800px; height:600px; border:1px solid black; margin:10px auto 0}
    </style>
    <script src="echarts.js" charset="utf-8"></script>
    <script>
    const $=document.querySelectorAll.bind(document);

    window.onload=function (){
      let oBox=$('.box')[0];

      let option={
        title: {
          text: '北京人口分布',
          subtext: '2017年度(单位: 万)',
          x: 'center'
        },
        legend: {
          data: ['男', '女'],
          right: 0,
          top: '50%',
          orient: 'vertical'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            data: [785, 23, 815, 945, 1120]
          },
          {
            name: '女',
            type: 'bar',
            data: [635, 13, 715, 1045, 1320]
          }
        ]
      };

      //1.创建
      let chart=echarts.init(oBox);

      //2.设置参数
      chart.setOption(option);
    };
    </script>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
